<template>
  <div>anv/g6</div>
</template>

<script>
/**
 * 参考
 * https://g6.antv.antgroup.com/examples/tree/customItemTree#customEdgeTree
 */
import G6 from "@antv/g6";
export default {
  data() {
    /**
     * 节点数据
     */
    const data = {
      id: "root",
      label: "root",
      children: [
        {
          id: "c1",
          label: "c1",
          children: [
            {
              id: "c1-1",
              label: "c1-1",
            },
            {
              id: "c1-2",
              label: "c1-2",
              children: [
                {
                  id: "c1-2-1",
                  label: "c1-2-1",
                },
                {
                  id: "c1-2-2",
                  label: "c1-2-2",
                },
              ],
            },
          ],
        },
        {
          id: "c2",
          label: "c2",
        },
        {
          id: "c3",
          label: "c3",
          children: [
            {
              id: "c3-1",
              label: "c3-1",
            },
            {
              id: "c3-2",
              label: "c3-2",
              children: [
                {
                  id: "c3-2-1",
                  label: "c3-2-1",
                },
                {
                  id: "c3-2-2",
                  label: "c3-2-2",
                },
                {
                  id: "c3-2-3",
                  label: "c3-2-3",
                },
              ],
            },
            {
              id: "c3-3",
              label: "c3-3",
            },
          ],
        },
      ],
    };
    return {
      data,
    };
  },
  mounted() {
    //注册图形marspr-tree-node
    G6.registerNode("marspr-tree-node", {
        options:{},
      draw(cfg, group) {
        const styles = this.getShapeStyle(cfg);
        const { labelCfg = {} } = cfg;

        const w = styles.width;
        const h = styles.height;
        const keyShape = group.addShape("rect", {
          attrs: {
            ...styles,
            x: -w / 2,
            y: -h / 2,
          },
        });

        if (cfg.label) {
          group.addShape("text", {
            attrs: {
              ...labelCfg.style,
              text: cfg.label,
              x: 50 - w / 2,
              y: 25 - h / 2,
            },
          });
        }
        return keyShape;
      },
    }, 'rect');

    //注册线marspr-tree-node-line
    G6.registerEdge("marspr-tree-node-line", {
      draw(cfg, group) {
        const startPoint = cfg.startPoint;
        const endPoint = cfg.endPoint;
        const { style } = cfg;
        const shape = group.addShape("path", {
          attrs: {
            stroke: style.stroke,
            path: [
              ["M", startPoint.x, startPoint.y],
              ["L", startPoint.x, (startPoint.y + endPoint.y) / 2],
              ["L", endPoint.x, (startPoint.y + endPoint.y) / 2],
              ["L", endPoint.x, endPoint.y],
            ],
          },
        });

        return shape;
      },
    });

    const width = this.$el.scrollWidth;
    const height = 400;

    //默认节点样式
    const defaultNodeStyle = {
      fill: "#91d5ff",
      stroke: "#40a9ff"
    };
    //默认线样式
    const defaultEdgeStyle = {
      stroke: "#91d5ff",
    };

    //默认节点label样式
    const defaultLabelCfg = {
      style: {
        fill: "#000",
        fontSize: 12,
      },
    };

    //布局
    const defaultLayout = {
      type: "compactBox",
      direction: "TB",
      getId: function getId(d) {
        return d.id;
      },
      getHeight: function getHeight() {
        return 16;
      },
      getWidth: function getWidth() {
        return 16;
      },
      getVGap: function getVGap() {
        return 40;
      },
      getHGap: function getHGap() {
        return 70;
      },
    };

    // 创建G6.TreeGraph
    const graph = new G6.TreeGraph({
      container: this.$el,
      width,
      height,
      linkCenter: true,
      defaultNode: {
        type: "marspr-tree-node",
        size: [120, 40],
        style: defaultNodeStyle,
        labelCfg: defaultLabelCfg,
      },
      defaultEdge: {
        type: "marspr-tree-node-line",
        style: defaultEdgeStyle,
      },
      layout: defaultLayout,
    });

    graph.data(this.data);
    graph.render();
    graph.fitView();
    this.group = graph
    window.aaaa = this
  },
};
</script>

<style>
</style>